import React, { Component } from "react";

import { NavBar, Icon, Tabs, Badge, Toast } from "antd-mobile";
import Search from "../search/Search";
import "./goodList.scss";
import myAxios from "../../utils/myAxios";
import empty_product from "../../assets/images/empty_product.jpg";
const tabs = [
  { title: <Badge text={""}>综合</Badge> },
  { title: <Badge text={""}>销量</Badge> },
  { title: <Badge>价格</Badge> },
];
export default class goodList extends Component {
  state = {
    goodlists: [],
  };
  // 进入商品详情页
  toDetailClick = (goods_id) => {
    this.props.history.push("/goodsDetail/" + goods_id);
  };
  constructor() {
    super();
    this.goodlist = React.createRef();
    this.pagenum = 1; // 默认第一页
    this.pagesize = 10; // 每页10条数据
  }
  componentDidMount() {
    console.log(this.props.location.search); // 获取参数
    let key = this.props.location.search.split("?") || ""; //
    // console.log(key[1]);  // query=%E6%98%A5%E5%AD%A3   cid=20
    let params = key[1].split("="); //  ["cid", "20"]    ["query", "爆款"]
    // 根据不同情况传参
    if (params[0] === "cid") {
      this.cid = params[1]; // 存
    }
    if (params[0] === "query") {
      this.query = params[1]; // 存
    }
    this.getProductList(); // 先请求一次数据
    // 监听滚动事件，添加新的数据
    console.log(this.goodlist.current); // 综合
    console.log(this.goodlist.current.parentElement); // 综合列表
    this.goodlist.current.parentElement.addEventListener(
      "scroll",
      this.handleScroll
    );
  }
  // 在组件销毁时要取消请求
  componentWillUnmount() {
    this.goodlist.current.parentElement.removeEventListener(
      "scroll",
      this.handleScroll
    );
  }
  // 定义滚动函数
  handleScroll = () => {
    // 父元素
    let parentElement = this.goodlist.current.parentElement;
    // 三种高度
    let scrollHeight = parentElement.scrollHeight;
    let clientHeight = parentElement.clientHeight;
    let scrollTop = parentElement.scrollTop;
    console.log(scrollHeight - clientHeight - scrollTop); // 0.4000244140625
    if (scrollHeight - clientHeight - scrollTop < 0.5) {
      console.log("触底");
      // 加载新的数据
      this.getProductList();
    }
  };
  // 定义获取数据的方法
  getProductList = () => {
    // 先定义一个空对象放置参数
    let params_obj = {};
    if (this.cid) {
      params_obj["cid"] = this.cid;
    }
    if (this.query) {
      params_obj["query"] = decodeURIComponent(this.query); // 解码
    }
    console.log(params_obj);
    // 未发送请求时判断有没有total这个属性，如果没有，说明还没有发送请求，第一页
    if (this.total) {
      // 页码数量应该加一
      params_obj["pagenum"] = ++this.pagenum;
    } else {
      // 第一页
      params_obj["pagenum"] = this.pagenum;
    }
    // 页码
    params_obj["pagesize"] = this.pagesize;
    // 底部
    if (this.pagenum > Math.ceil(this.total / this.pagesize)) {
      Toast.info("已经是最后一条数据了", 1);
    } else {
      myAxios
        .get("goods/search", {
          params: params_obj,
        })
        .then((res) => {
          console.log(res);
          this.total = res.total; // 总数据数
          this.setState({
            goodlists: [...this.state.goodlists, ...res.goods], // 追加数据
          });
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };

  render() {
    return (
      <div className="app-goodsList">
        {/* 导航 */}
        <div className="goodsList-nav">
          <NavBar
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.back(1)}
            className="goodsList-nav-con"
          >
            商品列表
          </NavBar>
        </div>
        {/* 搜索 */}
        <div className="goodsList-search">
          <Search></Search>
        </div>
        {/* 筛选商品的导航 */}
        <div className="goodList-nav">
          <div>
            <Tabs tabs={tabs} onClick={this.handleClick} initialPage={0}>
              <div
                ref={this.goodlist}
                className="item item-left"
                style={{
                  backgroundColor: "#fff",
                }}
              >
                {this.state.goodlists.map((v) => {
                  return (
                    <div
                      className="list-item"
                      key={v.goods_id}
                      // 通过传参，还可以通过属性传值
                      onClick={this.toDetailClick.bind(this, v.goods_id)}
                    >
                      <div className="item-img">
                        <img
                          src={
                            v.goods_small_logo
                              ? v.goods_small_logo
                              : empty_product
                          }
                          alt=""
                        />
                      </div>
                      <div className="item-text">
                        <div className="text-title">{v.goods_name}</div>
                        <div className="text-price">￥{v.goods_price}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
              <div
                className="item item-center"
                style={{
                  backgroundColor: "#fff",
                }}
              >
                Content of second tab
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
                <h1>11111</h1>
              </div>
              <div
                className="item item-right"
                style={{
                  backgroundColor: "#fff",
                }}
              >
                Content of third tab
              </div>
            </Tabs>
          </div>
        </div>
      </div>
    );
  }
}
